'use client'

import { Button, Card, Space, Typography } from 'antd';
import { HomeOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <Card className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <Title level={1} className="text-primary-600">
              Next.js 15 + Antd 5 演示
            </Title>
            <Paragraph className="text-lg text-gray-600">
              现代化前端应用模板，集成了Next.js 15和Antd 5
            </Paragraph>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <Card hoverable className="text-center">
              {/* @ts-ignore - React 19 与 Ant Design 图标组件类型兼容性问题 */}
              <HomeOutlined className="text-4xl text-primary-500 mb-4" />
              <Title level={3}>首页</Title>
              <Paragraph>欢迎来到我们的应用</Paragraph>
            </Card>
            
            <Card hoverable className="text-center">
              {/* @ts-ignore - React 19 与 Ant Design 图标组件类型兼容性问题 */}
              <UserOutlined className="text-4xl text-success-500 mb-4" />
              <Title level={3}>用户</Title>
              <Paragraph>用户管理和认证</Paragraph>
            </Card>
            
            <Card hoverable className="text-center">
              {/* @ts-ignore - React 19 与 Ant Design 图标组件类型兼容性问题 */}
              <SettingOutlined className="text-4xl text-warning-500 mb-4" />
              <Title level={3}>设置</Title>
              <Paragraph>应用配置和偏好</Paragraph>
            </Card>
          </div>
          
          <div className="text-center">
            <Space size="large">
              <Button type="primary" size="large">
                开始使用
              </Button>
              <Button size="large">
                了解更多
              </Button>
            </Space>
          </div>
        </Card>
      </div>
    </div>
  );
} 